/**
 * Created by Administrator on 2017/6/13.
 */
import React from 'react';
import
{
    View,
    Text,
    TouchableHighlight,
    TouchableOpacity,
    Image,
    ListView,
    StyleSheet,
}
    from 'react-native';
import  BaseComponent, {base,AppIndictor} from '../../../base/Base' ;
let {CategoryGoods_1019} =base.requests ;
export default class LifeServer extends BaseComponent {
    constructor(props) {
        super(props);
        var ds =new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataS: ds,
            categoryId:'639299b8-3e20-439c-aacb-e63c3b64b606',
            dataSource: [],
            isParamsOk:false,
            showIndictor:true,
        };
    }
    _getFirstList(categoryId) {
        base.network.getUipData(CategoryGoods_1019,{'categoryId':categoryId},
            (categoryIdData) => {
                this.setState({
                    dataSource:categoryIdData,
                    showIndictor:false,
                })
            },
            (error) => {
                alert(JSON.stringify(error))
                this.setState({
                    showIndictor:false,
                })
            }
        )
    }
    componentDidMount() {
        this._getFirstList(this.state.categoryId);
    }
    _pressRow(rowID,rowData){
        // console.log(rowData);
       this._jumpToOtherPage('LifeServerSecondList',{dataList:rowData['categoryGoods'],title:rowData['categoryName']});
    }
    _renderRow(rowData, sectionID, rowID){
        return (
            <TouchableOpacity onPress={()=>this._pressRow(rowID,rowData)} style={styles.container}>
                <Image source={{uri: rowData['menuImg']}} style={styles.image}>
                    <Text style={styles.text}>{rowData['categoryName']}</Text>
                    <Text style={styles.textDetail}>{/*{rowData['remark']}*/}舒适&nbsp;安逸</Text>
                </Image>
            </TouchableOpacity>
        );
    }
    static navigationOptions = ({navigation}) => ({
        title:navigation.state.params.title,
    });
    //跳转到其他页面
    _jumpToOtherPage(lable,params){
        this.props.navigation.navigate(lable,params);
    }
    render() {
      return (
          <View style={{flex:1}}>
              <AppIndictor
                  modalVisible={this.state.showIndictor}
                  size={'large'}
                  color={'#ff6138'}
              />


              <ListView
                  enableEmptySections={true}
                   dataSource={this.state.dataS.cloneWithRows(this.state.dataSource)}
                   renderRow={this._renderRow.bind(this)}
              />
          </View>
      )
    }
}
var styles=StyleSheet.create({
    container:{
        height:200,
        flexDirection:'row',
        justifyContent:'center',
        padding:10,
        paddingBottom:0,
        backgroundColor:'#f6f6f6',
        borderRadius:5,
    },
    image:{
        width:"100%",
        height:"100%",
        paddingTop:20,
        paddingLeft:15,
        paddingBottom:20,
        paddingRight:15,
    },
    text:{
        flex:1,
        textAlign:'left',
        fontSize:18,
        color:"#fff",
    },
    textDetail:{
        flex:2,
        textAlign:'left',
        fontSize:18,
        color:"#fff",
    }
})